import React, { useState, useEffect } from 'react';
import {List, Card} from 'antd';
import Meta from "antd/es/card/Meta"; // 假设使用的是Ant Design for React

interface Props {
  userList?: API.UserVO[];
}

const UserList: React.FC<Props> = (props) => {
  const defaultPostList: any[] = [];
  const [userList, setUserList] = useState<API.UserVO[]>(props.userList || defaultPostList);

  useEffect(() => {
    setUserList(props.userList || defaultPostList);
  }, [props.userList]);

  return (
    <List
      grid={{ gutter: 16, column: 4 }}
      itemLayout="vertical"
      dataSource={userList}
      renderItem={(item) => (
          <Card
            hoverable
            style={{ width: 240 }}
            cover={
              <img alt="example" src={item.userAvatar} />
            }
          >
            <Meta title={item.userName} />
            <div>{item.userProfile}</div>
          </Card>
      )}
    />
  );
};

export default UserList;
